<template>
  <van-loading type="spinner" v-if="loading" size="0.5rem" color="#1989fa" />
  <van-icon
    v-else
    :color="value ? 'yellow' : '#777'"
    :name="value ? 'star' : 'star-o'"
    @click="setStatus"
  />
</template>

<script>
import { addCollect, deleteCollect } from "@/api/article";
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      // 设置加载状态
      loading: false,
    };
  },
  /* 
   收藏功能思路
   1.监听收藏图标的点击事件，提供事件处理函数
   2.在事件处理函数中判断是否已收场
   3.如果value为true 代表已收藏 就调取消收藏的接口
   4.如果value为fasle 代表未收藏 就调收藏接口
   需要携带什么参数？
   文章详情页的id   至于token在请求拦截器中处理了
  */
  methods: {
    async setStatus() {
      try {
        // 点击收藏 加载状态设置未true
        this.loading = true;
        if (this.value) {
          await deleteCollect(this.id);
        } else {
          await addCollect(this.id);
        }
        // 以上只是改了数据库中的 状态 需要改本地的收藏状态 那么需要把value 取反传给父组件 父组件进行修改
        this.$emit("input", !this.value);
      } finally {
        // 把loading设置为原始状态
        this.loading = false;
      }
    },
  },
};
</script>

<style>
</style>